<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        #ul_1{
            list-style: none;
        }

        #ul_1>li.a{
              width: 230px;
              height: 30px;
              background-color: lightgray;
              line-height: 30px;
              border-radius:5px;
              border: 1px solid rgb(221,221,221);
              margin: 5px;
          }
        #ul_1>li.b{
            width: 230px;
            background-color: lightgray;
            line-height: 30px;
            border-radius:5px;
            border: 1px solid rgb(221,221,221);
            margin: 5px;
        }
        .li_child li {
            padding: 5px;
        }

        #ul_1 li:hover{
            background-color: inherit;
        }
        .li_child{
            display: none;
        }
    </style>
    <script src="../js/jquery-3.1.1.js"></script>
    <script>
        $(function(){
            $("#ul_1>li").addClass("a")
            $("#ul_1>li").click(function(){
                $("#ul_1>li").addClass("b").removeClass("a")
                $(this).find("ul").show()
                $(this).siblings().find("ul").hide();
            })
            $("#ul_1>li").click(function(){
                $(this).find("ul").hide()
            })
        })
    </script>
</head>
<body>
        <ul id="ul_1" >
            <li>&nbsp;&nbsp;班级管理
                <ul class="li_child">
                    <li>&nbsp;&nbsp;添加班级信息</li>
                    <li>&nbsp;&nbsp;班级信息查询</li>
                </ul>
            </li>
            <li>&nbsp;&nbsp;实习生信息管理
                <ul class="li_child">
                    <li>&nbsp;&nbsp;添加班级信息</li>
                    <li>&nbsp;&nbsp;班级信息查询</li>
                </ul>
            </li>
            <li>&nbsp;&nbsp;实习日志管理
                <ul class="li_child">
                    <li>&nbsp;&nbsp;添加班级信息</li>
                    <li>&nbsp;&nbsp;班级信息查询</li>
                </ul>
            </li>
            <li>&nbsp;&nbsp;实习评价管理
                <ul class="li_child">
                    <li>&nbsp;&nbsp;添加班级信息</li>
                    <li>&nbsp;&nbsp;班级信息查询</li>
                </ul>
            </li>
            <li>&nbsp;&nbsp;用户管理
                <ul class="li_child">
                    <li>&nbsp;&nbsp;添加班级信息</li>
                    <li>&nbsp;&nbsp;班级信息查询</li>
                </ul>
            </li>
            <li>&nbsp;&nbsp;院校管理
                <ul class="li_child">
                    <li>&nbsp;&nbsp;添加班级信息</li>
                    <li>&nbsp;&nbsp;班级信息查询</li>
                </ul>
            </li>
            <li>&nbsp;&nbsp;数据统计
                <ul class="li_child">
                    <li>&nbsp;&nbsp;添加班级信息</li>
                    <li>&nbsp;&nbsp;班级信息查询</li>
                </ul>
            </li>

        </ul>
</body>
</html>